// import Home from "@/views/home"
// import User from "@/views/user"
// import About from "@/views/about"
import { Navigate } from "react-router-dom"
import React, { lazy } from "react"

// 懒加载
const Home = lazy(() => import("@/views/home"))
const User = lazy(() => import("@/views/user"))
const About = lazy(() => import("@/views/about"))
const Page1 = lazy(() => import("@/views/page1"))
const Page2 = lazy(() => import("@/views/page2"))

// 懒加载的写法外面需要套一层 loading
const withLoadingComponent = (comp:JSX.Element) =>
    <React.Suspense fallback={<div>loading...</div>}>{comp}</React.Suspense>



const routers = [
    {
        path: "/",
        element: <Navigate to='/page1' />
    },
    {
        path: "/",
        element:<Home />,
        // element:withLoadingComponent(<Home />),
        // element:<Navigate to='/page1'></Navigate>,
        children:[
            {
                path: "/page1",
                element:withLoadingComponent(<Page1 />)
            },
            {
                path: "/page2",
                element:withLoadingComponent(<Page2 />)
            },
        ]
    },
    {
        path: "*",//访问其余路径直接跳转到首页
        element:<Navigate to='/page1'></Navigate>
    },
    // {
    //     path: "/user",
    //     element:withLoadingComponent(<User />)
    // },
    // {
    //     path: "/about",
    //     element:withLoadingComponent(<About />)
    // },
]


export default routers